<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #content{
            /* 不显示，但还占位隐藏 */
            /* visibility: hidden; */

            /*display: none;在隐藏的同时让元素脱离文档流*/

            /* position: absolute;
            left: -100%; */

            /* 行内块级元素 即不换行，又可以做盒子，设置宽高*/
            /* display: inline-block; */
            /* inline 行内元素 不能设置宽和高 */
            /* width: 200px;
            height: 200px;
            background-color: red; */
            /* transform: scale(0,0);行内元素不能隐藏 */

            /* opacity: 0.1; */
            /* 透明度，会占据文档流 */

            /* display: inline-block;
            transform: translate(-100%); */
            /* 相对于元素本身移动 transform作用在非inline元素上*/
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="ep1">
            <span id="content">彪悍的人生</span>
            <input type="text" id="input" value="彪悍的人生不需要解释" />
            <input type="button" id="save" value="Save">
            <input type="button"  id="cancel" value="Cancel">
        </div>
    </div>
    
    <script>
        // js基于原型式面向对象
        function EditInPlace(){
            // 有什么好处呢？把dom元素作为属性
            this.content = document.getElementById('content');
            this.save = document.getElementById('save');
            this.cancel = document.getElementById('cancel');
            this.input = document.getElementById('input');

            this.bindEvents();
        }
        EditInPlace.prototype = {
            // 罗列方法
            converToText(){
                this.content.style.display = 'inline';
                this.save.style.display = 'none';
                this.cancel.style.display = 'none';
                this.input.style.display = 'none';
            },
            bindEvents(){
                // 函数是事件的回调函数，this指向元素
                // constructor
                // let that = this; // 作用域链
                this.content.addEventListener('dblclick',()=>{
                    // console.log(this);
                    // 双击的时候
                    // this丢失，被覆盖
                    // 用箭头函数 内部没有this
                    this.converToEdit();
                    input.focus();
                });

                let that = this;
                this.save.addEventListener('click',function() {
                    let val =input.value;
                    content.innerText = val;
                    that.converToText();
                    console.log(input.value);
                })

                this.cancel.addEventListener('click',() =>{
                    this.converToText();
                })
            },

            converToEdit(){
                this.content.style.display = 'none';
                this.save.style.display = 'inline';
                this.cancel.style.display = 'inline';
                this.input.style.display = 'inline';
            }
        }
        // html + css
       window.onload = function(){
           let editor = new EditInPlace();
           editor.converToText();
       }
        // js来切换现实/隐藏
        // const save = document.getElementById('save');
        // const cancel = document.getElementById('cancel');
        // const input = document.getElementById('input');
        // const content = document.getElementById('content');
        // // DOM 动态样式
        // function converToText(){
        //     content.style.display = 'inline';
        //     save.style.display = 'none';
        //     cancel.style.display = 'none';
        //     input.style.display = 'none';
        // }
        // // converToText()
        // // // 函数式编程 组织代码
        // // // 功能复杂，流程式的代码不合适
        // // // 函数封装，被执行，复用
        // function converToEdit(){
        //     content.style.display = 'none';
        //     save.style.display = 'inline';
        //     cancel.style.display = 'inline';
        //     input.style.display = 'inline';
        // }

        // content.addEventListener('dblclick',function(){
        //     converToEdit();
        //     input.focus();
        // });

        // save.addEventListener('click',function(){
        //     // 拿到当前的值，并动态设置span
        //     const val = input.value;
        //     content.innerText = val;
        //     converToText();
        // })

        // cancel.addEventListener('click',function(){
        //     converToText();
        // })

        // setTimeout(() =>{
        //     content.style.display = 'none';
        //     save.style.display = 'inline';
        //     cancel.style.display = 'inline';
        //     input.style.display = 'inline';
        // },3000)
    </script>
</body>
</html>